shadcn/uiコンポーネントのインポート先ディレクトリを変更する方法
2024.10.14リテールアプリ共創部のるおんです。皆さんはReactやNext.jsなどを用いたアプリケーション開発のUIコンポーネントライブラリに何を使用していますか？
私は普段は shadcn/ui を使用しています。新たなパッケージの依存関係を追加することなく、好きなコンポーネントを自由にカスタマイズして使用できるのは嬉しいですよね。
今回は shadcn/ui のコンポーネントがデフォルトでインポートされるディレクトリを変更する方法についてご紹介します。
shadcn/uiとは
これはコンポーネント・ライブラリではありません。 再利用可能なコンポーネントのコレクションであり、コピーしてアプリに貼り付けることができます。
コンポーネント・ライブラリではないというのはどういう意味ですか？
依存関係としてインストールしないという意味です。 npm経由で利用することも配布することもできない。
(DeepL翻訳)
npmでインストールするのではなく、npxコマンドを使用してCLI経由でコンポーネントをコピーしてこれます。shadcn/ui を使うと、コンポーネントをコピペして持ってきたようなものなので、依存関係の複雑さやアップデートの追従など従来のUIコンポーネントライブラリが抱えていた問題に対処しなくても良くなります。v0もこのshadcn/uiを採用しています。
例えば、以下のようにbuttonコンポーネントを追加すると、通常components/uiディレクトリにbuttonコンポーネントが追加されます。
npx shadcn@latest add button
/
├─ src
│ ├─ app
+ │ └─ components/ui
+ │ └─ button.tsx
└─ package.json
しかしプロジェクトのディレクトリ構成によっては、このデフォルトの場所が適切でない場合があります。
例えばNext.jsのプロジェクトにおいて、componentsディレクトリをルーティングのセグメントとして扱いたくないので、_componentsのようなPrivate Folderに再利用可能なコンポーネントを格納していました。
その際に、shadcn/uiから追加したコンポーネントを毎回このディレクトリに移動するのがめんどくさかったので調査してみました。
インポート先ディレクトリの変更方法
shadcn/uiでデフォルトのインポートディレクトリを変更するには、npx shadcn@latest initで作成されたプロジェクトのルートディレクトリにあるcomponents.jsonファイルを修正する必要があります。
Import alias for ui components.
The CLI will use the aliases.ui value to determine where to place your ui components. Use this config if you want to customize the installation directory for your ui components.
aliasesセクションを探し、uiキーの値を変更します。
{
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
- "ui": "@/components/ui",
+ "ui": "@/app/_components/ui",
"lib": "@/lib",
"hooks": "@/hooks"
}
}
この例では、uiのエイリアスを@/app/_components/uiに変更しています。これにより、shadcn/uiのaddコマンドで追加する新しいコンポーネントは、指定した新しいディレクトリに自動でインポートされるようになります。
ちなみに、ドキュメントにはaddコマンドの追加オプションで -p, --path <path>と指定してあげれば追加したいディレクトリを指定できると書いてあるのですが、こちらは現在（2024/10/14）、バージョン2.1.0では正しく動きませんでした。参考: issue#1156
動作確認
設定を変更したら、実際にコンポーネントを追加して動作を確認してみます。
npx shadcn@latest add button
このコマンドを実行すると、buttonコンポーネントがapp/_components/uiディレクトリに追加されるのが確認できます。
/
├─ src
│ └─ app
+ │ ├─ _components/ui
+ │ │ └─ button.tsx
│ └─ page.tsx
└─ package.json
おわりに
以上、shadcn/uiでデフォルトでインポートされるディレクトリを変更する方法についてご紹介しました。
どなたかの参考になれば幸いです。
参考
